<template>
  <div class="view-wrapper">
    <div class="name_title">企业名称： {{ companyName }}</div>
    <div class="listBox">
      <div class="listBox_head">
        <div class="typeList">
          <div :class="['list', current == item.id ? 'active' : '']" v-for="item in typeList" :key="item.id" @click="handleType(item.id)">{{item.value}}</div>
        </div>
        <!-- <el-button type="primary" @click="dialogVisible = true">添加门店</el-button> -->
      </div>
      <StoresList v-if="current == 0"></StoresList>
      <PersonnelList v-if="current == 1"></PersonnelList>
      <ChainList v-if="current == 2"></ChainList>
    </div>
  </div>
</template>
<script>
// components
import {
  chainshopList,
  chainshopDetail,
  addShop,
  editMerchant,
  deleteMerchant,
} from "@/api/chainManagement";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
import StoresList from './storeMaintenance/storesList'
import PersonnelList from './storeMaintenance/personnelList'
import ChainList from "./storeMaintenance/chainList"

export default {
  //   name: "",
  components: {
    ExportExcelButton,
    StoresList,
    PersonnelList,
    ChainList,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      companyName: "",
  
      tableData: [],
     
      typeList: [
        {id: 0, value: '门店维护'},
        {id: 1, value: '人员管理'},
        {id: 2, value: '连锁进件'},
      ],
      current: 0,
    };
  },
  created() {
    this.chainId = this.$route.query.id;
    this.companyName = this.$route.query.name;
  },
  computed: {},
  methods: {
    /* 切换选项 */
    handleType(id){
      this.current = id
    },
  },
};
</script>
<style lang="scss" scoped>
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.name_title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px;
  display: flex;
  align-items: center;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
::v-deep.el-input--medium .el-input__inner {
  width: 220px !important;
}
.el-input {
  width: 220px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.list_search {
  display: flex;
  align-items: center;
  padding-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  .typeList{
    display: flex;
    justify-content: flex-start;
    border: 1px solid #dfe6ec;
    .list{
      width: 104px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      border-right: 1px solid #dfe6ec;
      cursor: pointer;
    }
    .list:nth-last-child(1){
      border: none;
    }
    .active{
      background: #1890ff;
      color: #fff;
    }
  }
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}
.button_box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.from_box {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
.from_box_l {
  font-size: 14px;
  color: #606266;
  width: 240px;
  text-align: right;
}
.add_boxls {
  display: flex;
  align-items: center;
  justify-content: center;
}
.add_box {
  width: 45%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  height: 152px;
  cursor: pointer;
  background: #fdf6ec;
  border: 1px solid #f5dab1;
  color: #e6a23c;
}
.add_box2 {
  background: #ecf5ff;
  border: 1px solid #b3d8ff;
  color: #409eff;
}
.add_box:hover {
  opacity: 0.8;
}
.add_box img {
  width: 46px;
  height: 46px;
  margin-right: 12px;
}
</style>
